<template>
  <el-card class="box-card comments-wrapper">
    <!-- TODO: 评论输入框 -->
    <div class="comment-input-wrapper">
      <el-input v-model="inputComment" @keyup.enter="handleClickPostComment" placeholder="写下一条评论吧~"></el-input>
      <el-button @click="handleClickPostComment" class="comment-btn" type="primary">发表</el-button>
    </div>

    <div v-if="list.length > 0">
      <CommentsItem v-for="item in list" :key="item" :username="item.username" :comment="item.comment" :date="item.date">
      </CommentsItem>
    </div>
    <div v-else class="comment-nothing">暂无评论~</div>
  </el-card>
</template>

<script>
import CommentsItem from './CommentItem.vue'
import { mapState } from 'vuex'
export default {
  name: 'CommentsCard',
  components: {
    CommentsItem
  },
  data() {
    return {
      inputComment: "",
      list: [

      ]
    }
  },
  computed: {
    ...mapState({
      nickname: state => state.user.nickname,
    }),
  },
  methods: {
    // 发表评论-点击事件
    handleClickPostComment() {
      if (this.inputComment.length <= 0) {
        return
      }
      // 获取当前时间
      const date = new Date()
      const dataStr = `${date.getFullYear()}/${date.getMonth()}/${date.getDay()} ${date.getHours()}:${date.getMinutes()}`
      // 数据拼接,插入数据
      let commentItem = {
        username: this.nickname,
        comment: this.inputComment,
        date: dataStr
      }
      this.list.push(commentItem)

      // 清空输入
      this.inputComment = ""
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-input-wrapper {
  display: flex;
  flex-direction: row;
  padding-bottom: 18px;

  .comment-btn {
    margin-left: 8px;
  }
}

.comment-nothing {
  text-align: center;
  font-size: 12pt;
  color: var(--el-color-info);
}
</style>
